<!DOCTYPE html>

<html class="app-ui">

	<head>
		<!-- Meta -->
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

		<!-- Document title -->
		<title>学科分析报表</title>

		<meta name="description" content="AppUI - Admin Dashboard Template & UI Framework" />
		<meta name="author" content="rustheme" />
		<meta name="robots" content="noindex, nofollow" />

		<!-- Favicons -->
		<link rel="apple-touch-icon" href="assets/img/favicons/apple-touch-icon.png" />
		<link rel="icon" href="assets/img/favicons/favicon.ico" />

		<!-- Google fonts -->
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,900%7CRoboto+Slab:300,400%7CRoboto+Mono:400" />

		<!-- Page JS Plugins CSS -->
		<link rel="stylesheet" href="assets/js/plugins/slick/slick.min.css" />
		<link rel="stylesheet" href="assets/js/plugins/slick/slick-theme.min.css" />

		<!-- AppUI CSS stylesheets -->
		<link rel="stylesheet" id="css-font-awesome" href="assets/css/font-awesome.css" />
		<link rel="stylesheet" id="css-ionicons" href="assets/css/ionicons.css" />
		<link rel="stylesheet" id="css-bootstrap" href="assets/css/bootstrap.css" />
		<link rel="stylesheet" id="css-app" href="assets/css/app.css" />
		<link rel="stylesheet" id="css-app-custom" href="assets/css/app-custom.css" />
		<!-- End Stylesheets -->
		<script src="assets/js/core/jquery.min.js"></script>
		<script></script>
	</head>

	<body class="app-ui layout-has-drawer layout-has-fixed-header" style="background-color: white;">
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			#onePointThreeRate {
				height: 150px;
			}
			label {
				margin-right: 60px;
				margin-bottom: 30px;
			}
			#onePointThreeRate {
				margin-bottom: 10px;
			}
			.averageInfo {
				margin-top: 100px;
			}
			
			.btn-group button {
				margin-bottom: 2px;
				width: 130px;
			}
			#fenjie {
				height: 15px;
				background: #f0f0f0;
			}
			.excellentInfo {
				margin-top: 100px;
			}
			.goodInfo {
				margin-top: 150px;
			}
			.passInfo {
				margin-top: 150px;
			}
		</style>
		<div class="app-layout-canvas">
			<div class="app-layout-container">

				<!-- Drawer -->
				<aside class="app-layout-drawer">

					<!-- Drawer scroll area -->
					<div class="app-layout-drawer-scroll">
						<!-- Drawer logo -->
						<div id="logo" class="drawer-header">
							<a href="index.html">
								<h4 style=" text-align:center">云阅卷</h4>
							</a>
						</div>

						<!-- Drawer navigation -->
						<nav class="drawer-main">
							<ul class="nav nav-drawer">


								<li class="nav-item nav-drawer-header">菜单导航</li>

								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="ion-ios-calculator-outline"></i>考试管理</a>
									<ul class="nav nav-subnav">

										<li>
											<a href="examList.html">考试列表</a>
										</li>

										<li>
											<a href="createExam.html">创建考试</a>
										</li>
									</ul>
								</li>

								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="ion-ios-compose-outline"></i> 在线阅卷</a>
									<ul class="nav nav-subnav">

										<li>
											<a href="examSetting.html">阅卷设置</a>
										</li>

										<li>
											<a href="examPapers.html">我要阅卷</a>
										</li>

										<li>
											<a href="examProblemPapers.html">问题卷处理</a>
										</li>
										<li>
											<a href="examProgress.html">进度监控</a>
										</li>

										<li>
											<a href="examQuality.html">质量抽查</a>
										</li>

									</ul>
								</li>


								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="ion-ios-list-outline"></i> 成绩管理</a>
									<ul class="nav nav-subnav">

										<li>
											<a href="examReport.html">考试成绩单</a>
										</li>

										<li>
											<a href="examSubReport.html">单科试题得分表</a>
										</li>

										<li>
											<a href="gradeAnalyze.html">年纪成绩分析</a>
										</li>

										<li>
											<a href="classAnalyze.html">班级成绩分析</a>
										</li>

									</ul>
								</li>

								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="ion-ios-browsers-outline"></i> 教师讲卷</a>
									<ul class="nav nav-subnav">

										<li>
											<a href="scoreAndPapers.html">成绩与答卷</a>
										</li>

										<li>
											<a href="highScoreComposition.html">高分作文</a>
										</li>

										<li>
											<a href="topicScore.html">试题得分情况</a>
										</li>

										<li>
											<a href="subAnalyzeReport.html">学科分析报表</a>
										</li>
									</ul>
								</li>

								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="ion-social-javascript-outline"></i> 用户中心</a>
									<ul class="nav nav-subnav">

										<li>
											<a href="schoolManager.html">学校管理</a>
										</li>

										<li>
											<a href="subManager.html">学科管理</a>
										</li>

										<li>
											<a href="gradeManager.html">年级管理</a>
										</li>

										<li>
											<a href="gradeAndSubManager.html">年级与学科关系维护</a>
										</li>

										<li>
											<a href="teaManager.html">教师管理</a>
										</li>

										<li>
											<a href="classManager.html">班级管理</a>
										</li>

										<li>
											<a href="stuManager.html">学生管理</a>
										</li>

										<li>
											<a href="subAdnClassAnager.html">学科与班级关系维护</a>
										</li>
									</ul>
								</li>

							</ul>
						</nav>
						<!-- End drawer navigation -->

						<div class="drawer-footer">
							<p class="copyright">Copyright &copy; 2020.北京万邦易嵌科技有限公司.<a target="_blank" href="http://www.wanbangee.com">万邦易嵌</a></p>
						</div>
					</div>
					<!-- End drawer scroll area -->
				</aside>
				<!-- End drawer -->

				<!-- Header -->
				<header class="app-layout-header">
					<nav class="navbar navbar-default">
						<div class="container-fluid">
							<div class="navbar-header">
								<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar-collapse"
								 aria-expanded="false">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
									<span class="sr-only">Toggle drawer</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<span class="navbar-page-title">

									考试成绩分析报告
								</span>
							</div>

							<div class="collapse navbar-collapse" id="header-navbar-collapse">
								<!-- .navbar-left -->

								<ul class="nav navbar-nav navbar-right navbar-toolbar hidden-sm hidden-xs">
									<li>
										<!-- Opens the modal found at the bottom of the page -->
										<a href="javascript:void(0)" data-toggle="modal" data-target="#apps-modal"><i class="ion-grid"></i></a>
									</li>

									<li class="dropdown">
										<a href="javascript:void(0)" data-toggle="dropdown"><i class="ion-ios-bell"></i> <span class="badge">3</span></a>
										<ul class="dropdown-menu dropdown-menu-right">
											<li class="dropdown-header">Profile</li>
											<li>
												<a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">3</span> News </a>
											</li>
											<li>
												<a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">1</span> Messages </a>
											</li>
											<li class="divider"></li>
											<li class="dropdown-header">More</li>
											<li>
												<a tabindex="-1" href="javascript:void(0)">Edit Profile..</a>
											</li>
										</ul>
									</li>

									<li class="dropdown dropdown-profile">
										<a href="javascript:void(0)" data-toggle="dropdown">
											<span class="m-r-sm">John Doe <span class="caret"></span></span>
											<img class="img-avatar img-avatar-48" src="assets/img/avatars/avatar3.jpg" alt="User profile pic" />
										</a>
										<ul class="dropdown-menu dropdown-menu-right">
											<li class="dropdown-header">
												Pages
											</li>
											<li>
												<a href="base_pages_profile.html">Profile</a>
											</li>
											<li>
												<a href="base_pages_profile.html"><span class="badge badge-success pull-right">3</span> Blog</a>
											</li>
											<li>
												<a href="frontend_login_signup.html">Logout</a>
											</li>
										</ul>
									</li>
								</ul>
								<!-- .navbar-right -->
							</div>
						</div>
						<!-- .container-fluid -->
					</nav>
					<!-- .navbar-default -->
				</header>
				<!-- End header -->

				<main class="app-layout-content">

					<!-- Page Content -->
					<div class="container-fluid p-y-md">
						<!-- Stats -->
						<div class="row">
							<div class="col-sm-6 col-lg-6">
								<h6>筛选班级和考试</h6>
								<label>选择考试：</label>
								<div class="btn-group">
									<button id="exam-btn" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
									 aria-haspopup="true" aria-expanded="false">
										选择考试 <span class="caret"></span>
									</button>
									<ul class="dropdown-menu check-exam">

									</ul>
								</div><br />
								<label>选择班级：</label>
								<div class="btn-group">
									<button id="class-btn" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
									 aria-haspopup="true" aria-expanded="false">
										选择班级 <span class="caret"></span>
									</button>
									<ul class="dropdown-menu check-class">

									</ul>
								</div><br />
								<label>选择科目：</label>
								<div class="btn-group">
									<button id="sub-btn" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
									 aria-haspopup="true" aria-expanded="false">
										选择科目 <span class="caret"></span>
									</button>
									<ul class="dropdown-menu check-sub">

									</ul>
								</div>
							</div>
							<!-- .col-sm-6 -->

							<div id="onePointThreeRate" class="col-sm-6 col-lg-6">
								<h6>一分三率</h6>
								<label>班级最高分：<span id="max-score"></span></label>
								<label>优秀率：<span id="excellent-rate"></span></label>
								<br />
								<label>总分：<span id="sum-score"></span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<label>良好率：<span id="good-rate"></span></label>
								<br />
								<label>平均分：<span id="average"></span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<label>及格率：<span id="pass-rate"></span></label>
							</div>
							<!-- .col-sm-6 -->
						</div>
						<!-- .row -->
						<!-- End stats -->
						<div id="fenjie">

						</div>

						<div class="row">
							<div class="col-md-8 col-lg-8">
								<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
								<div id="average-main" style="width: 600px;height:400px;">

								</div>
							</div>

							<div class="col-md-4 col-lg-4">
								<div class="averageInfo">
									<label>本次平均分年级排名：<span id="avg-ranking"></span></label>
									<label>本次考试班级平均分：<span id="avg-class"></span></label>
									<label>本次考试年级平均分：<span id="avg-grade"></span></label>
								</div>
							</div>
						</div>
						<!-- .row -->
						<div class="row">
							<div class="col-md-8 col-lg-8">
								<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
								<div id="excellent-main" style="width: 600px;height:400px;">

								</div>
							</div>

							<div class="col-md-4 col-lg-4">
								<div class="excellentInfo">
									<label>本次优秀率年级排名：<span id="excellent-rate-ranking"></span></label>
									<label>本次考试班级优秀率：<span id="excellent-rate-p"></span></label>
									<label>本次考试年级优秀率：<span id="grade-avg-exc"></span></label>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-md-8 col-lg-8">
								<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
								<div id="good-main" style="width: 600px;height:400px;">

								</div>
							</div>

							<div class="col-md-4 col-lg-4">
								<div class="goodInfo">
									<label>本次良好率年级排名：<span id="good-rate-ranking"></span></label>
									<label>本次考试班级良好率：<span id="good-rate-p"></span></label>
									<label>本次考试年级良好率：<span id="grade-avg-good"></span></label>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-md-8 col-lg-8">
								<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
								<div id="pass-main" style="width: 600px;height:400px;">

								</div>
							</div>

							<div class="col-md-4 col-lg-4">
								<div class="passInfo">
									<label>本次及格率年级排名：<span id="pass-rate-ranking"></span></label>
									<label>本次考试班级及格率：<span id="pass-rate-p"></span></label>
									<label>本次考试年级及格率：<span id="grade-avg-pass"></span></label>
								</div>
							</div>
						</div>
					</div>
					<!-- .container-fluid -->
					<!-- End Page Content -->

				</main>

			</div>
			<!-- .app-layout-container -->
		</div>
		<!-- .app-layout-canvas -->

		<!-- Apps Modal -->
		<!-- Opens from the button in the header -->
		<div id="apps-modal" class="modal fade" tabindex="-1" role="dialog">

			<div class="modal-sm modal-dialog modal-dialog-top">
				<div class="modal-content">
					<!-- Apps card -->
					<div class="card m-b-0">
						<div class="card-header bg-app bg-inverse">
							<h4>Apps</h4>
							<ul class="card-actions">
								<li>
									<button data-dismiss="modal" type="button"><i class="ion-close"></i></button>
								</li>
							</ul>
						</div>
						<div class="card-block">
							<div class="row text-center">
								<div class="col-xs-6">
									<a class="card card-block m-b-0 bg-app-secondary bg-inverse" href="index.html">
										<i class="ion-speedometer fa-4x"></i>
										<p>Admin</p>
									</a>
								</div>
								<div class="col-xs-6">
									<a class="card card-block m-b-0 bg-app-tertiary bg-inverse" href="frontend_home.html">
										<i class="ion-laptop fa-4x"></i>
										<p>Frontend</p>
									</a>
								</div>
							</div>
						</div>
						<!-- .card-block -->
					</div>
					<!-- End Apps card -->
				</div>
			</div>
		</div>
		<!-- End Apps Modal -->

		<div class="app-ui-mask-modal"></div>

		<!-- AppUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock and App.js -->
		<script src="assets/js/core/jquery.min.js"></script>
		<script src="assets/js/core/bootstrap.min.js"></script>
		<script src="assets/js/core/jquery.slimscroll.min.js"></script>
		<script src="assets/js/core/jquery.scrollLock.min.js"></script>
		<script src="assets/js/core/jquery.placeholder.min.js"></script>
		<script src="assets/js/app.js"></script>
		<script src="assets/js/app-custom.js"></script>

		<!-- Page Plugins -->
		<script src="assets/js/plugins/slick/slick.min.js"></script>
		<script src="assets/js/plugins/chartjs/Chart.min.js"></script>
		<script src="assets/js/plugins/flot/jquery.flot.min.js"></script>
		<script src="assets/js/plugins/flot/jquery.flot.pie.min.js"></script>
		<script src="assets/js/plugins/flot/jquery.flot.stack.min.js"></script>
		<script src="assets/js/plugins/flot/jquery.flot.resize.min.js"></script>
		<script src="assets/js/echarts.min.js"></script>
		<!-- Page JS Code -->
		<!-- <script src="assets/js/pages/index.js"></script> -->
		<script>
			$(function() {
				// Init page helpers (Slick Slider plugin)
				//App.initHelpers('slick');
				var examId;
				var claId;
				var subId;
				/* 获取当前登录人所在学校的所有考试 */
				$("#exam-btn").click(function() {
					var url = "http://localhost:6630/wanbangee/exam-statistic/all/allexams";
					var param = {
						accId: 1
					};
					$.get(url, param, function(data) {
						//var content = "<li><a href="#">Action</a></li>";
						var content = "";
						for (var i = 0; i < data.examList.length; i++) {
							content += "<li><a class='exam' href='" + data.examList[i].examId + "'>" + data.examList[i].examNm +
								"</a></li>"
						}
						$(".check-exam").html(content);
					});
				});

				/* 给考试相关li元素进行事件委派 */
				$(".check-exam").delegate(".exam", "click", function() {
					//设置button文字内容为选择的考试名称
					$("#exam-btn").text($(this).html());
					//获取examId
					examId = $(this).attr("href");
					//查询参加该场考试的班级
					var url = "http://localhost:6630/wanbangee/exam-statistic/all/allclasses";
					var param = {
						examId: examId
					};
					$.get(url, param, function(data) {
						//console.log(data);
						var content = "";
						for (var i = 0; i < data.classList.length; i++) {
							content += "<li><a class='classes' href='" + data.classList[i].claId + "'>" + data.classList[i].claNm +
								"</a></li>"
						}
						$(".check-class").html(content);
					})

					//查询本场考试的所有考试科目
					var urlsub = "http://localhost:6630/wanbangee/exam-statistic/all/allsubjects";
					$.get(urlsub, param, function(data) {
						//console.log(data);
						var content = "";
						for (var i = 0; i < data.subjectList.length; i++) {
							content += "<li><a class='sub' href='" + data.subjectList[i].subId + "'>" + data.subjectList[i].subNm +
								"</a></li>"
						}
						$(".check-sub").html(content);
					})
					return false;
				});

				/* 给班级相关li元素进行事件委派 */
				$(".check-class").delegate(".classes", "click", function() {
					//设置button文字内容为选择的班级名称
					$("#class-btn").text($(this).text());
					claId = $(this).attr("href");
					if(subId != undefined){
						selectARateOffThree();
						selectARateOffThreeRank();
					}
					return false;
				});

				/* 给学科相关li元素进行事件委派 */
				$(".check-sub").delegate(".sub", "click", function() {
					//设置button文字内容为选择的学科名称
					$("#sub-btn").text($(this).text());
					subId = $(this).attr("href");
					selectARateOffThree();
					selectARateOffThreeRank();
					return false;
				})

				/* 查询该考试一分三率 */
				function selectARateOffThree() {
					var url = "http://localhost:6630/wanbangee/exam-statistic/subScoreAnalyze/selectARateOffThree";
					var param = {
						examId: examId,
						claId: claId,
						subId: subId
					};
					$.get(url, param, function(data) {
						$("#max-score").text(data.max_score);
						$("#excellent-rate").text(data.excellent_rate);
						$("#sum-score").text(data.sum_score);
						$("#good-rate").text(data.good_rate);
						$("#average").text(data.average);
						$("#pass-rate").text(data.pass_rate);
					})
				}

				/* 查询一分三率信息及排名情况 */
				function selectARateOffThreeRank() {
					var url = "http://localhost:6630/wanbangee/exam-statistic/subScoreAnalyze/selectARateOffThreeRank";
					var param = {
						examId: examId,
						claId: claId,
						subId: subId
					}
					$.get(url, param, function(data) {
						//平均分
						$("#avg-ranking").text(data.averageMap.ranking);
						$("#avg-class").text(data.averageMap.average);
						$("#avg-grade").text(data.averageMap.grade_avg);
						//平均分排名变化
						// 基于准备好的dom，初始化echarts实例
						var avgChart = echarts.init(document.getElementById('average-main'), 'light');
						var avgRankArray = new Array();
						var avgNmArray = new Array();
						for (var i = 0; i < data.averageRankingMap.length; i++) {
							avgNmArray.push(data.averageRankingMap[i].examNm);
							avgRankArray.push(data.averageRankingMap[i].ranking);
						}
						avgChart.setOption({
							title: {
								text: '平均分年级排名变化'
							},
							xAxis: {
								type: 'category',
								data: avgNmArray
							},
							yAxis: {
								type: 'value'
							},
							series: [{
								data: avgRankArray,
								type: 'line'
							}]
						})
						//优秀率
						$("#excellent-rate-ranking").text(data.excellentRateMap.excellent_rate_ranking);
						$("#excellent-rate-p").text(data.excellentRateMap.excellent_rate);
						$("#grade-avg-exc").text(data.excellentRateMap.grade_avg_exc);
						//优秀率排名变化
						var excellentChart = echarts.init(document.getElementById("excellent-main"),'light');
						var excRankArray = new Array();
						var excNmArray = new Array();
						for(var i=0;i<data.excellentRateRankingList.length;i++){
							excNmArray.push(data.excellentRateRankingList[i].exam_nm);
							excRankArray.push(data.excellentRateRankingList[i].exc_rank);
						}
						excellentChart.setOption({
							title: {
								text: '优秀率年级排名变化'
							},
							xAxis: {
								type: 'category',
								data: excNmArray
							},
							yAxis: {
								type: 'value'
							},
							series: [{
								data: excRankArray,
								type: 'line'
							}]
						})
						//良好率
						$("#good-rate-ranking").text(data.goodRateMap.good_rate_ranking);
						$("#good-rate-p").text(data.goodRateMap.good_rate);
						$("#grade-avg-good").text(data.goodRateMap.grade_avg_good);
						//良好率排名变化
						var goodChart = echarts.init(document.getElementById("good-main"),'light');
						var goodRankArray = new Array();
						var goodNmArray = new Array();
						for(var i=0;i<data.goodRateRankingList.length;i++){
							goodNmArray.push(data.goodRateRankingList[i].exam_nm);
							goodRankArray.push(data.goodRateRankingList[i].good_rank);
						}
						goodChart.setOption({
							title: {
								text: '良好率年级排名变化'
							},
							xAxis: {
								type: 'category',
								data: goodNmArray
							},
							yAxis: {
								type: 'value'
							},
							series: [{
								data: goodRankArray,
								type: 'line'
							}]
						})
						//及格率
						$("#pass-rate-ranking").text(data.passRateMap.pass_rate_ranking);
						$("#pass-rate-p").text(data.passRateMap.pass_rate);
						$("#grade-avg-pass").text(data.passRateMap.grade_avg_pass);
						//及格率排名变化
						var passChart = echarts.init(document.getElementById("pass-main"),'light');
						var passRankArray = new Array();
						var passNmArray = new Array();
						for(var i=0;i<data.passRateRankingList.length;i++){
							passNmArray.push(data.passRateRankingList[i].exam_nm);
							passRankArray.push(data.passRateRankingList[i].pass_rank);
						}
						passChart.setOption({
							title: {
								text: '及格率年级排名变化'
							},
							xAxis: {
								type: 'category',
								data: passNmArray
							},
							yAxis: {
								type: 'value'
							},
							series: [{
								data: passRankArray,
								type: 'line'
							}]
						})
					}, 'json')
				}
			});
		</script>

	</body>

</html>
